<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      placeholder="What needs to be done?"
      v-model="input"
      autofocus
      @keyup.enter="add"
    />
  </header>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import { useMainStore } from '../store'
const todo = useMainStore()


//输入框输入的值
var input = ref('')
//回车添加新数据
const add = async function () {
  if (input.value != '') {
    const addData = {
      id: todo.todoList.length == 0 ? 1 : todo.todoList[todo.todoList.length - 1].id + 1,
      title: input.value,
      status: false
    }
    var data = await axios.post('http://localhost:8000/todo', addData)
    console.log(data);
    if (data.data && data.status == 201) {
      todo.update(data.data)
    }
    input.value = ''
  } else {
    alert('内容不能为空')
  }


}


</script>

<style scoped>
</style>